<template>
	<view class="login-all-wrap">
		<cu-custom :bgColor="theme" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">联络员注册</block>
		</cu-custom>
		
		<view style="background-color: #FFFFFF;padding-bottom: 65rpx;">
			<view class="top-wrap">
				<button class="captcha-login-btn currentLogin">手机号注册</button>
			</view>		
			<view class="text-center" style="padding-bottom: 70rpx;font-size: 55rpx;"></view>
			<view class="px-2 login-input-wrap">
				<view class="mb-2">
					<input type="text" placeholder-style="color:#C9C9C9" v-model="username" placeholder="请输入手机号码" class="border-bottom"/>
				</view>
				<view class="mb-2" style="margin-top: 60rpx;">
					<input type="text" placeholder-style="color:#C9C9C9" v-model="password" placeholder="请设置密码" class="border-bottom"/>
				</view>
			</view>
			<view class="login-btn-wrap py-2 px-2">
				<button 
					class="login-btn bg-main text-white" 
					style="border-radius: 50rpx; border: 0;" 
					type="primary" 
					:enabled="false" 
					:class="{ opatity: enabled}"
				 @click="submit">注册</button>
			</view>
			<view class="flex align-center justify-center"></view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				username: "",
				phone:"",
				password: "",
			}
		},
		onLoad() {
			let {statusBarHeight} = uni.getSystemInfoSync();
			this.statusBarHeight = statusBarHeight;
		},
		computed:{
			enabled: function(){
				if(this.username.length < 11 || this.password.length < 6){
					return true;
				}
				return false;
			},
		},
		methods: {
			initForm(){
				this.username = '';
				this.password = '';
				this.phone = '';
			},
			//验证
			validate(){
				var mPattern = /^1[3456789][0-9]\d{8}$/;
				this.phone = this.username;
				if(!mPattern.test(this.phone)){
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false;
				}
				//更多验证
				return true;
			},
			// 提交
			submit(){
				// 表单验证
				if(!this.validate()) return;
				let gData = app.globalData;
				//注册处理
				uni.request({
				    url: app.globalData.serve_job_url + "addLianluoyuan", 
				    data: {
				        lianluoyuanPhonenum: this.username,
						lianluoyuanBiaoshi: this.password,
				    },
				    success: (res) => {
						if(res.data.code == 200){
							uni.showToast({
								title: '联络员注册成功！',
								icon: 'none'
							});
							setTimeout(function() {
								uni.showModal({
									title: '审批状态提示',
									content: '联络员状态审批中...',
									showCancel: false,
									confirmText:'关闭',
									success: (res) => {
										if(res.confirm) {  
											uni.navigateBack({
												delta: 1
											});
										}
									} 
								})
							}, 1000);
						}else if(res.data.code == 500){
							uni.showModal({
								title: '注册提示',
								content: '此手机号已注册...',
								showCancel: false,
								confirmText:'关闭',
								success: (res) => {
								} 
							})
						}
				    }
				});	
			}
		}
	}
</script>
<style>
	.top-wrap button {
		display: inline-block;
		background-color: #FFFFFF;
		overflow: inherit;
	}
	button::after{ 
		border: none; 
	}
	.captcha-login-btn,
	.pass-login-btn {
		font-size: 30rpx;
		color: #646464;
	}
	.currentLogin {
		font-weight: bold;
		font-size: 44rpx;
	}
	.login-input-wrap input {
		color: #000000;
	}
	.border-bottom {
		color: #C9C9C9;			
	}
	.login-btn-wrap {
		margin-top: 80rpx;
		height: 90rpx;
	}
	.login-btn-wrap button {
		font-size: 30rpx;
		height: 100%;
		line-height: 90rpx;
	}
	.login-btn {
		background: linear-gradient(to right, #7BD68E, #65CCB9);	
	}
	.opatity {
		opacity: 0.5; 
	}
	.px-2 {
	    padding: 0 45rpx;
	}
</style>